<template>
  <div class="mod-config">
    <el-dialog title="请选择合同指标" :close-on-click-modal="false" :visible.sync="httablevisible" append-to-body width="75%">
    <basic-container>
      <div  :height="searchheight" style="margin-top: -40px;padding-bottom:0;padding-top:0">
        <div style="margin-top: -20px;margin-left: 40px">
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline">
            <el-form-item label="发约人姓名">
              <el-input v-model="dataForm.fayueName" placeholder="发约人姓名" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="受约人姓名">
              <el-input v-model="dataForm.shouyueName" placeholder="受约人姓名" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="合同名称">
              <el-input v-model="dataForm.contractName" placeholder="合同名称" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" class="marginLeft"
                         @click="getDataList(1)">检索
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="boxsty zhiBiao" v-if="zhiShow==1" style="margin-top: -80px;padding-bottom:0" >
      <div class="avue-crud">
        <el-table
          ref="multipleTable"
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          @selection-change="handleSelectionChange"
          @select-all="onSelectAll"
          v-loading="dataListLoading">
          <el-table-column type="selection"  width="55" header-align="center" align="center"></el-table-column>
          <el-table-column type="index" width="70" header-align="center" align="center" label="序号"></el-table-column>
          <el-table-column
            prop="contractName"
            header-align="center"
            align="left"
            show-overflow-tooltip
            width="160"
            label="合同名称">
            <template slot-scope="scope">
                <span  v-if="permissions.hetongrenwu_hetonghtxxdjb_edit" style="color:#0e258c;cursor: pointer;">{{scope.row.contractName}}</span>
                <span v-else>{{scope.row.contractName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="radio == 2"
            prop="jigouName"
            header-align="center"
            show-overflow-tooltip
            align="center"
            label="机构名称">
          </el-table-column>
          <el-table-column
            v-if="radio==1"
            prop="shouyueName"
            header-align="center"
            align="center"
            min-width="120"
            show-overflow-tooltip
            label="受约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.shouyueName)">
                <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                  <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">({{cutout(scope.row.shouyueName).length}}人)</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="shouyueZhiwu"
            header-align="center"
            align="center"
            min-width="150"
            show-overflow-tooltip
            v-if="radio==1"
            label="受约人职务">
            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.shouyueZhiwu)">
                <el-tooltip class="item"  :disabled="item.length<8&&cutout(scope.row.shouyueZhiwu).length<3" effect="dark" :content="scope.row.shouyueZhiwu" placement="top-start">
                  <span>{{validatenull(item)?'-':item | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueName"
            header-align="center"
            align="center"
            min-width="120"
            show-overflow-tooltip
            label="发约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.fayueName)">
                <el-tooltip :disabled="cutout(scope.row.fayueName).length<3" class="item" effect="dark" :content="scope.row.fayueName" placement="top-start">
                <span>{{item}}<span v-if="cutout(scope.row.fayueName).length>2&&index==1">({{cutout(scope.row.fayueName).length}}人)</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueZhiwu"
            header-align="center"
            align="center"
            min-width="150"
            show-overflow-tooltip
            label="发约人职务">
            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.fayueZhiwu)">
                <el-tooltip class="item" :disabled="item.length<8&&cutout(scope.row.fayueZhiwu).length<3" effect="dark" :content="scope.row.fayueZhiwu" placement="top-start">
                    <span>{{(validatenull(item)?'-':item) | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="avue-crud__pagination"  style="margin-top: -10px" >
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      </div>
    </basic-container>
    <div class="avue-crud__pagination"  style="margin-top: -15px;padding:0;" >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSelectedData" >确定</el-button>
        <el-button type="primary" plain @click="httablevisible = false;zhiShow=2">取消</el-button>
      </span>
    </div>
    </el-dialog>
  </div>

</template>

<script>
import { delObj,radioTwoList} from '@/api/hetongrenwu/hetonghtxxdjb'
import { getNiDingList,Htongndts,tuisongwenben,faqiqianding,deleteBatchHtcj,getSumWeight } from '@/api/hetongrenwu/hetongyeji/hetongnd'
import { getPageForfy,getPageForfyzbnd,getPageFortszbnd,pageByTs} from '@/api/hetongrenwu/hetongyeji/hetongnd'
import {mapGetters} from 'vuex'
import { validatenull } from "@/util/validate";


export default {
  components: {
  },
  props:{
    hetongId: Number,
  },
  data() {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radio:'1',
      radioTwo:'-1',
      zhiShow:'0',
      httablevisible:false,
      zhibiaoForm:{
      },
      treeOrgData:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      confirmTreeData:[
        {
          id: 5,
          label: '二级机构'
        }
      ],
      selectedTreeData:[],
      searchadvanced: true,
      searchheight: '0',
      radioTwoList:radioTwoList,
      operType:'',
      formname:'',
      clickhtid:'',
      ndId:"",
      previousList:[]
    }
  },
  watch:{

  },
  filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
  },
  created() {
    let params = this.$route.query;
    if (!validatenull(params)) {
      this.radioTwo=params.radioTwo
    }
    this.getDataList();
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    //获取数据
    initData(type,formname,id,list){
     //console.log(type,formname,id,list)
      this.previousList = list
      this.operType=type;
      this.httablevisible=true;
      this.zhiShow=1;
      this.formname=formname;
      this.ndId = id
      this.getDataList();
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if(this.searchadvanced){
        this.searchheight= '50'
      }
    },
    // 获取数据列表
    getDataList() {
     //console.log(this.hetongId+"==2="+this.formname);
      if(this.operType=='ts'){
        if(this.formname=="zbnd"){
          this.dataListLoading = true
          pageByTs(Object.assign({
            fayueName:this.dataForm.fayueName,
            shouyueName:this.dataForm.shouyueName,
            contractName:this.dataForm.contractName,
            id:this.ndId,
            quotaauditStatus:1,
            current: this.pageIndex,
            size: this.pageSize
          })).then(response => {
            this.dataList = response.data.data.records;
            this.totalPage = response.data.data.total;
            this.$nextTick(function(){
              this.dataListLoading = false
            })
          })
        }else {
          this.dataListLoading = true
          getPageForfy(Object.assign({
            fayueName: this.dataForm.fayueName,
            shouyueName: this.dataForm.shouyueName,
            contractName: this.dataForm.contractName,
            id: this.hetongId,
            contractAuditStatus: 1,
            current: this.pageIndex,
            size: this.pageSize
          })).then(response => {
            this.dataList = response.data.data.records;
            this.totalPage = response.data.data.total;
            this.$nextTick(function () {
              this.dataListLoading = false
            })
          })
        }
      }else if(this.operType=='fy'){
        if(this.formname=="zbnd"){
          this.dataListLoading = true
        getPageForfyzbnd(Object.assign({
          fayueName:this.dataForm.fayueName,
          shouyueName:this.dataForm.shouyueName,
          contractName:this.dataForm.contractName,
          id:this.hetongId,
          quotaauditStatus:1,
          current: this.pageIndex,
          size: this.pageSize
        })).then(response => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total;
          this.$nextTick(function(){
            this.dataListLoading = false
          })
        })
        }else{
          this.dataListLoading = true
        getPageForfy(Object.assign({
          fayueName:this.dataForm.fayueName,
          shouyueName:this.dataForm.shouyueName,
          contractName:this.dataForm.contractName,
          id:this.hetongId,
          quotaauditStatus:1,
          current: this.pageIndex,
          size: this.pageSize
        })).then(response => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total;
          this.$nextTick(function(){
            this.dataListLoading = false
          })
        })
        }

      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
     cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
    //选择数据
    handleSelectionChange(rows){
      if(this.operType=='ts'){
        this.multipleSelection = rows;
      }else if(this.operType=='fy'){
       //console.log(rows)
       //console.log(rows.length)
        if(rows.length > 1){

          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(rows.pop())
        }else{
          this.multipleSelection = rows;

        }
      }
    },
    //全选
    onSelectAll(rows){
     //console.log('全选',rows)
      if(this.operType=='fy'){
        this.$refs.multipleTable.clearSelection()
      }else{
        this.multipleSelection = rows;
      }
    },
    //确定选中的数据
    handleSelectedData(){
      var params={
        operType:this.operType,
        rows:this.multipleSelection,
        previousList:this.previousList,
        type:'yjht'
      }
      this.httablevisible=false;
      this.zhiShow=2;
      this.$emit('selectedData',params)
    },
    //判空
    validatenull(val){
     return validatenull(val)
    },
  }
}
</script>
